<template>
	<div class="conleft">
		<div class="top" v-if="addtitle">
			<el-button icon="el-icon-edit" type="primary" @click="isxinjian">{{addtitle}}</el-button>
		</div>
		<div class="msg">
			<div v-for="(item,index) in msglist" :key="index" class="msg-item" :class="couter==index?'msg-item-a':'msg-item'" @click="chooce(index,item.name)">{{item.name}}</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:['addtitle','msglist'],
		data(){
			return{
				couter:0
			}
		},
		watch:{
			addtitle(newval,oldval){
				console.log(newval)
			},
			msglist(newval,oldval){
				console.log(newval)
			},
		},
		mounted(){
			this.$emit('chosleft',this.msglist[this.couter].name)
			this.$emit('chosleft',{"name":this.msglist[this.couter].name,"id":this.couter})
		},
		methods:{
			chooce(index,name){
				this.couter=index
				this.$emit('chosleft',{"name":name,"id":index})
			},
			isxinjian(){
				console.log(111)
				this.$emit('xinjianadd','111')
			}
		}
	}
</script>

<style lang="scss" coped>
	.conleft{
		width: 100%;
		overflow:hidden ;
		text-align: center;
		padding: 30px 0;
		.top{
			margin-bottom: 30px;
		}
		.msg{
			width: 100%;
			font-weight: 600;
			.msg-item{
				width: 100%;
				padding: 15px 0;
				
			}
			.msg-item-a{
				box-sizing: border-box;
				width: 100%;
				padding: 10px 0;
				border-left: 3px solid rgba(65, 147, 255, 1.0);
				background-color: rgba(65, 147, 255, 0.2);
				color:rgba(65, 147, 255, 1.0);
			}
		}
		.msg :hover {
		    cursor: pointer;
		}
	}
</style>